<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />

    <title>MSK</title>

    <!-- Bootstrap Core CSS -->
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond./javascripts/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery -->
    <script src="/javascripts/jquery.js"></script>
    <script src="/javascripts/jquery.fly.min.js"></script>
    <script src="/javascripts/util.js"></script>
    <style type="text/css">
        .notsel {
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }

        .f_in {
            background: #ebebeb;
            font-size: 16px;
            font-weight: bold;
            padding: 10px;
            cursor: pointer;
            color: gray;
            border: 1px solid white;
        }

        .waimai {
            font-weight: bold;

        }

        .grid-item{

            width:100%;
        }

        .tmpc {
            background: none;
            padding:10px; width:300px; height:50px;
            background:rgb(38,188,213);
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius:15px;
            position:relative;
            border:none;
        }

        .tmpc i{
            position:absolute;
            top:13px;
            right:16px;
        }

        .touming{
            filter:alpha(opacity=80);
            -moz-opacity:0.8;
            -khtml-opacity: 0.8;
            opacity: 0.8;
        }

        .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}


    </style>

    <script>
        var cacheData = {};

        function addCuisine(obj) {
            var te=$("#showArea").find(".tmpc[wxsid="+$(obj).attr("wxsid")+"]");

            if(te.length>0){
                var dcount=$("#showArea").find(".tmpc[wxsid="+$(obj).attr("wxsid")+"] .dcount").html();
                dcount=parseInt(dcount)+1;
                $("#showArea").find(".tmpc[wxsid="+$(obj).attr("wxsid")+"] .dcount").html(dcount);
            }else {
                var template = "	 <div  style=\"float:left;color:white;margin-top:2px;width:100%;\" class=\"f_in tmpc notsel\" onclick=\"removeCuisine(this)\"  wxsid=\""
                        + $(obj).attr("wxsid")
                        + "\" wxstype=\"" + $(obj).attr("wxstype") + "\" wxprice=\"" + $(obj).attr("wxprice") + "\" wxsname=\"" + $(obj).attr("wxsname") + "\">" + $(obj).attr("wxsname")
                        + "<span style='font-weight: bold' > x <span class='dcount'>1</span></span> <i class=\"fa fa-close fa-lg\"  style=\"color:rgb(167,220,224)\"></i>  "
                        + " </div>";
                $("#showArea").append($(template));
            }
        }

        function getPinfo(){
            var pinfo= JSON.parse(localStorage.getItem("pinfo"));
            if(pinfo==null){
                var s = [];
                var hexDigits = "0123456789abcdef";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                pinfo={};
                pinfo["name"]="";
                pinfo["phone"]="";
                pinfo["address"]="";
                pinfo["uuid"]=uuid;
                localStorage.setItem("pinfo", JSON.stringify(pinfo));
            }
            return pinfo;
        }

        function removeOrder(obj) {
            $(obj).parent().parent().remove();
            synPrice();
            synBtn();
        }

        $(document).ready(function () {
            var pinfo= getPinfo();
            if( $("#ousername").val()=="")
                $("#ousername").val(pinfo["name"])
            if( $("#ouserphone").val()=="")
                $("#ouserphone").val(pinfo["phone"])
            if( $("#ouseraddress").val()=="")
                $("#ouseraddress").val(pinfo["address"])


            $("#showArea").on('touchstart', '.tmpc', function(e){
                var x = e.originalEvent.targetTouches[0].clientX;
                $(this).attr("oldx",x);
            });
            $("#showArea").on('touchmove', '.tmpc', function(e){
                event.preventDefault();
                var count=$(this).find(".dcount").html();
                var x = e.originalEvent.targetTouches[0].clientX;
                var ydjl=x-$(this).attr("oldx");
                var lx=$(this).attr("lastx");
                if(Math.abs(x-lx)>=5){
                    $(this).attr("ydjl",ydjl);
                    if(ydjl>0){
                        count=parseInt(count)+1;
                    }else{
                        count=parseInt(count)-1;
                        count=count<=0?1:count;
                    }
                $(this).find(".dcount").html(count);
                }

                $(this).attr("lastx",x);
            });



            $("#ousername").blur(function(){
                var pinfo= JSON.parse(localStorage.getItem("pinfo"));
                pinfo=pinfo==null?{}:pinfo;
                pinfo["name"]=$("#ousername").val();
                localStorage.setItem("pinfo", JSON.stringify(pinfo));
            });

            $("#ouserphone").blur(function(){
                var pinfo= JSON.parse(localStorage.getItem("pinfo"));
                pinfo=pinfo==null?{}:pinfo;
                pinfo["phone"]=$("#ouserphone").val();
                localStorage.setItem("pinfo", JSON.stringify(pinfo));
            });

            $("#ouseraddress").blur(function(){
                var pinfo= JSON.parse(localStorage.getItem("pinfo"));
                pinfo=pinfo==null?{}:pinfo;
                pinfo["address"]=$("#ouseraddress").val();
                localStorage.setItem("pinfo", JSON.stringify(pinfo));
            });



            $(".caishi").click(function () {
                var showLen= $("#showArea").find(".tmpc").length;
                if (showLen >= 5) {
                    alert("一次最多只能有5个!");
                    return;
                }
                addCuisine(this);
            });

            $("#atcbtn").click(function(event){
                var objs = $("#showArea").find(".tmpc");
                var templet = "";
                var orderTmp = "";




                    objs.each(function (i) {
                        var t= $("#cart").find(".datatr .oitems span[wxsid="+$(this).attr("wxsid")+"]");
                        if(t==null||t.length==0) {
                            var num = $(this).find(".dcount").html();
                            num = num == null ? 1 : num;
                            var wxstype = $(this).attr("wxstype");
                            var wxsid = $(this).attr("wxsid");
                            var wxsname = $(this).attr("wxsname");
                            var price = $(this).attr("wxprice");
                            templet += "<tr class=\"datatr\" wxsid='"+wxsid+"'>" +
                                    "<td class='oitems'><span dj=\""+price+"\"  wxstype=\"" + wxstype + "\" wxsid=\"" + wxsid + "\"" + " wxsname=\"" + wxsname + "\" class=\"waimai\">" + wxsname + "&nbsp;</span><br/>" +
                                    "</td>" +
                                    "<td >" +
                                    "<a href='javascript:;' onclick='cr(this)' class=\"sl\">" + num + "</a>" +
                                    "</td>" +
                                    "<td>￥<span class='jg'>" + price + "</span>" +
                                    "</td>" +
                                    "<td> <i class=\"fa fa-minus-circle\" onClick=\"removeOrder(this)\" style=\"cursor:pointer;\"></i> " +
                                    "</td>" +
                                    "</tr>"
                        }else{
                            var num = $(this).find(".dcount").html();
                            num = num == null ? 1 : num;
                            var jqObj= $("#cart").find("tr[wxsid="+$(this).attr("wxsid")+"]").find(".sl");
                            console.log(jqObj.html());
                            jqObj.html(parseInt(jqObj.html())+parseInt(num));
                        }

                    });

                $(".tmpc").remove();



                var addcar = $(this);
                var s = (Math.floor(Math.random()*10000) % 9+1).toString();
                var flyer = $("<img class='u-flyer'' src='/img/"+s+".png' width='200px'>");
                flyer.fly({
                    start: {
                        left: event.pageX-40, //开始位置（必填）#fly元素会被设置成position: fixed
                        top: event.pageY-10 //开始位置（必填）
                    },
                    end: {
                        left: $("#qrbtn").offset().left+100, //结束位置（必填）
                        top: $("#qrbtn").offset().top+10, //结束位置（必填）
                        width: 0, //结束时宽度
                        height: 0 //结束时高度
                    },
                    onEnd: function(){ //结束回调
                        $("#cart").find(".counttr").before($(templet));
                        synPrice();
                        synBtn();
                        this.destory(); //移除dom
                    }
                });
            });
        });




        function synPrice() {
            var total = 0;
            $("#cart .datatr").each(function (i, data) {
                var sl = $(data).find(".sl").html();
                var dj = $(data).find(".waimai").attr("dj");
                $(data).find(".jg").html(sl * dj);
                total += sl * dj;
            });
            $("#totalcount").html(total);
        }

        function synBtn(){
           var t= $("#cart .datatr").length;
            if(t>0 ){
                $("#qrbtn").attr("disabled",false);
                $("#qrbtn").css("background-color","rgb(38,188,213)");
                $("#qrbtn .badge").html(t);
            }else{
                $("#qrbtn").attr("disabled",true);
                $("#qrbtn").css("background-color","gray");
                $("#qrbtn .badge").html(t);
                $("#dorder").hide();
            }
        }

        function removeCuisine(obj) {
            $(obj).remove();
        }

        function cr(obj) {
            var num = prompt("请输入修改的数量", $(obj).html());
            var reg = /^\d+(?=\.{0,1}\d+$|$)/
            if (!reg.test(num)) num = 1;
            $(obj).html(num);
            synPrice();
        }

        function confirmOrder() {
            var name = $("#ousername").val();
            var phone = $("#ouserphone").val();
            var address = $("#ouseraddress").val();
            var remark=$("#remark").val();
            if (name == "" || phone == "" || address == "") {
                $("#ouserphone").focus();
                alert("个人信息不完整!");
                return;
            }
            var postData = {};
            var items = [];
            var total = 0;
            $("#cart .datatr").each(function (i, data) {
                var orderitem = {};
                var sl = $(data).find(".sl").html();
                var dj = $(data).find(".waimai").attr("dj");
                var oitems = $(data).find(".oitems span");
                var ordername = "";
                $(oitems).each(function (i, data) {
                    var name = $(data).attr("wxsname");
                    ordername += name + " ";
                });
                orderitem["name"] = ordername;
                orderitem["count"] = sl;
                orderitem["price"] = sl * dj;
                total += sl * dj;
                items.push(orderitem);
            });
            postData["price"] = total;
            postData["name"] = name;
            postData["phone"] = phone;
            postData["address"] = address;
            postData["status"] = 0;
            postData["items"] = items;
            postData["remark"]=remark;
            postData["time"] = new Date();
            postData["wxid"] ="<%= wxid%>";

            $.post("/order/confirm", {"postData": postData}, function () {

            });
            alert("您的订单已在处理!");
            window.location.href = window.location.href;
        }

        function closeOrder(){
            $("#dorder").fadeOut();
        }

        function showOrder(){
            $('body,html').animate({scrollTop:0},0);
            $("#dorder").css("height",$(document).height()+1000);
            $("#dorder").fadeIn();
        }




    </script>

</head>

<body style="background-color:rgb(167,220,224)" class="notsel">
<!--
<div class="alert alert-warning" style="margin-bottom:0px;padding-top:5px;padding-bottom:5px;">
   <a href="#" class="close" data-dismiss="alert">
      &times;
   </a>
   <strong>提示：</strong>测试时测试
</div>
-->
<div class="container-fluid"
     style="padding-left:0px;padding-right:0px;min-height:50px;position:fixed;right:0px;top:0px;width:150px;">
    <div style="" id="showArea" >

        <div style="float:left;width:100%;border:none; background: none;"
             class="f_in notsel" id="atcbtn"><a class="btn btn-lg btn-success" href="javascript:;"
                                                           style="background-color:rgb(38,188,213);border:none;line-height:33px;font-weight: bold;">
                <i class="fa fa-shopping-cart fa-2x pull-left"></i>添加</a></div>
    </div>
</div>

<div class="container-fluid"
     style="padding-left:0px;padding-right:0px;min-height:50px;position:fixed;right:0px;bottom:0px;width:150px;">
    <button class="btn btn-lg btn-success" type="button" style="background-color:gray;border: none;font-weight: bold;" id="qrbtn" disabled onclick="showOrder()">
        确认订单 <span class="badge">0</span>
    </button>
</div>

<div class="container-fluid " style="background-color:rgb(167,220,224);padding-left: 0px;width:180px;float: left;">
    <div>
        <div style="float:left;background-color:rgb(38,188,213);color:white;" class="grid-item f_in">点击选购</div>
        <% ra.forEach(function(weixinshow, index) { %>
        <div style="float:left;" class="grid-item f_in caishi" wxsname="<%= weixinshow.name %>" wxsid="<%= weixinshow._id %>" wxprice="<%=weixinshow.price==null?0:weixinshow.price %>"
             wxstype="<%= weixinshow.cstype %>">
           <i class="fa fa-plus fa-lg" style="color:rgb(167,220,224)"><span style="color:Gray;">&nbsp;￥<%=weixinshow.price==null?0:weixinshow.price %></span></i> <%= weixinshow.name %>
        </div>
        <% }) %>
    </div>

</div>


<div  style="background-color:#ebebeb;border-top:2px solid white;border-bottom:2px solid white;padding-left: 0px;position:absolute;width: 100%;z-index: 999999;display:none" id="dorder">
    <table class="table table-hover" id="cart">
        <thead>
        <tr>

            <th colspan="4"  style="text-align: right">
                <button type="submit" class="btn btn-default" onclick="confirmOrder()">给我送货</button>
                <button type="submit" class="btn btn-default" onclick="closeOrder()">返回主页</button>
            </th>
        </tr>
        <tr>
            <th >名称</th>
            <th>数量</th>
            <th>价格</th>
            <th width="10%">

            </th>
        </tr>

        <tr class="counttr">
            <td style="font-weight:bold;">合计：</td>
            <td></td>
            <td>￥<span id="totalcount">0</span></td>
            <td>

            </td>
        </tr>
        <tr>
            <td colspan="4">
                <table class="table" style="background-color:#ebebeb;">
                    <tr>
                        <td style="font-weight:bold;">
                            名称:
                        </td>
                        <td><input class="form-control" name="ousername" id="ousername" value="<%= name %>"></td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">
                            手机号码:
                        </td>
                        <td><input class="form-control" name="ouserphone" id="ouserphone" value="<%= phone==null?"":phone %>"></td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">
                            地址:
                        </td>
                        <td><input class="form-control" name="ouseraddress" id="ouseraddress" value="<%= address==null?"":address %>">
                        </td>
                    </tr>
                    <tr>
                        <td style="font-weight:bold;">
                            留言内容:
                        </td>
                        <td><input class="form-control" name="remark" id="remark" value="">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr colspan="4">
           <td align="center">

           </td>

        </tr>

        </thead>
    </table>
</div>

<!-- /#w0rapper -->


<!-- Bootstrap Core JavaScript -->
<script src="/javascripts/bootstrap.min.js"></script>

</body>

</html>
